<script>
    import {DataTable} from "carbon-components-svelte";
    import {Alert, Badge, Button, Input, Modal} from "@svelteuidev/core";
    import {EnvelopeClosed, InfoCircled, MagnifyingGlass} from "radix-icons-svelte";
    import {onMount} from "svelte";
    import {users} from "../store.js";

    import {Dialog as ADialog, Modal as AModal} from "attractions";

    let useRows=[]
    let mBtn=true
    let dBtn=false

    $: mBtnStyle={
        disabled:mBtn
    }
    $: dBtnStyle={
        disabled: dBtn
    }

    let alert={
        msg:'',
        color:''
    }

    function getUser(){
        fetch("/api/users",{
            method:"Get",
        }).then((res)=>{
            // console.log(res)
            return res.json()
        }).then((res)=>{
            users.update((cur)=>{
                useRows=res.users
                useRows.forEach((item,index)=>{
                    item['id']=item['account']
                    item['time']=item['create_at'].Time
                    console.log(item['create_at'].Time)
                })
                // return useRows
                console.log(useRows)
                return res.users
            })
        })
    }
    onMount(
        async ()=>{
            getUser()
        },
        // console.log($users)
    )

    function delUser() {
        selectedRowIds.forEach((item, index) => {
            fetch("/api/deluser", {
                method: "Post",
                body: JSON.stringify({
                    user: item
                })
            }).then((r) => {
                return r.json()
            }).then((r) => {
                console.log(r)
                if (r.status === 0) {
                    console.log(r)
                    alert.msg='delete user success!'
                    alert.color='green'
                    openAlert=true
                    open=false
                } else {
                    alert.msg = 'delete user error!'
                    alert.color='red'
                    openAlert = true
                    open=false
                }
            })
        })
    }

    let expandedRowIds = [];
    let selectedRowIds = [];

    $: {
        console.log("expandedRowIds", expandedRowIds);
        console.log("selectedRowIds", selectedRowIds);
        if (selectedRowIds.length === 1) {
            mBtn = false
            dBtn = false
        } else if (selectedRowIds.length !== 0) {
            dBtn = false
            mBtn = true
        } else {
            mBtn = true
            dBtn = true
        }
        if (openAlert) {
            setTimeout(() => {
                openAlert = false
            }, 1500);
        }else{
            getUser()
        }
    }
    let opened=false
    let open=false
    let openAlert=false;
</script>

<span>
    <AModal bind:open={open} let:closeCallback>
        <div>
    <ADialog title="确定删除?" {closeCallback}>
        <div style="display: flex;justify-content: center">
        <Button style="margin: 20px 5px 10px 5px">取消</Button>
        <Button on:click={()=>{delUser()}} style="margin: 20px 5px 10px 5px">确认</Button>
                </div>
    </ADialog>

            </div>
    </AModal>

    <Modal
            {opened}
            on:close={() => (opened= false)}
            title="修改信息"
            overlayOpacity={0.55}
            overlayBlur={3}
    >
        <div >
            <p style="text-align: left;margin: 8px">账号</p>
            <Input
                   placeholder="account"
            />
        </div>
        <div >
            <p style="text-align: left;margin: 8px">昵称</p>
            <Input
                   placeholder="nick"
            />
        </div>
        <div >
            <p style="text-align: left;margin: 8px">状态</p>
            <Input
                   placeholder="status"
            />
        </div>
    <div style="margin-top: 20px;display: flex;justify-content: center">
        <Button style="margin: 20px 5px 10px 5px" >取消</Button>
        <Button style="margin: 20px 5px 10px 5px">修改</Button>
    </div>
</Modal>
<Input
        icon={MagnifyingGlass}
        placeholder='Search'
        rightSectionWidth={70}
        styles={{ rightSection: { pointerEvents: 'none' }}}
        style="margin: 5px 5px 10px 5px"
>
    <Badge slot='rightSection' color='blue' variant='filled' size="sm">
        search
    </Badge>
<!--    <Button slot='rightSection' variant="gradient" color="blue">搜索</Button>-->
</Input>
    <div style="display: flex;justify-content: flex-end">
    <Button disabled={mBtn} on:click={()=>{opened=true}} variant='gradient' color="blue" style="margin: 5px">modify</Button>
    <Button disabled={dBtn} on:click={()=>{open=true}} variant='outline' color="red" style="margin: 5px">delete</Button>
    </div>
</span>
{#if openAlert}
    <Alert icon={InfoCircled} color={alert.color}>
        {alert.msg}
    </Alert>
{/if}
<DataTable
        expandable
        selectable

        batchSelection
        bind:expandedRowIds
        bind:selectedRowIds
        headers={[
        { key: "account", value: "账号" },
        { key: "nick", value: "昵称" },
        { key: "status", value: "状态" },
        { key: "time", value: "注册时间" },
        ]}
        rows={useRows}
>
    <svelte:fragment slot="expanded-row" let:row>
        <pre>{JSON.stringify(row, null, 2)}</pre>
    </svelte:fragment>
</DataTable>

<svelte:head>
    <link
            rel="stylesheet"
            href="../link/http_unpkg.com_carbon-components-svelte_css_white.css"
    />
<!--    <link rel="stylesheet" href="./path/to/library/svelteit.min.css" />-->
</svelte:head>
